import { useState, useRef } from 'react';
import axios from '../../axios';
import { Form, message, Input, Button } from 'antd';
import {
  UserOutlined,
  LockOutlined,
  MailOutlined,
  MobileOutlined,
} from '@ant-design/icons';

const Phone: React.FC = () => {
  //全局提示
  const success = () => {
    message.success('This is a success message');
  };
  //声明表单
  const [loginForm] = Form.useForm();
  //声明表单数据
  const [formData, setFormData] = useState({});
  //登录处理函数
  const loginHandle = async (values: any) => {
    //获取表单数据

    // setFormData({ ...values })
    //发送请求
    const {
      data: { data, code, msg },
    } = await axios.post('login', { ...values });
    if (code === 200) {
      success();
    } else {
      message.error(msg);
    }
  };
  //获取验证码模块
  const codeButton = useRef(null);
  const [codeText, setCodeText] = useState('获取验证码');
  const [codeDisabled, setCodeDisabled] = useState(false);
  //设置定时器
  let timer: any = null;
  const setTime = () => {
    let time = 60;
    timer = setInterval(() => {
      time--;
      if (time > 0) {
        setCodeText(`${time}秒后重新获取`);
        setCodeDisabled(true);
      } else {
        clearInterval(timer);
        setCodeText('获取验证码');
        setCodeDisabled(false);
      }
    }, 1000);
  };
  const getCode = async () => {
    setTime();
    // //发送请求
    // const { data: { code, msg } } = await axios.get('getCode')
    // if (code === 200) {
    //   setTime()
    // }
  };
  return (
    <Form
      layout="horizontal"
      initialValues={{ size: 'large' }}
      size="large"
      name="loginForm"
      form={loginForm}
      onFinish={loginHandle}
      onValuesChange={(values) => {}}
    >
      <Form.Item name="phone">
        <Input placeholder="请输入手机号码" prefix={<MobileOutlined />} />
      </Form.Item>
      <Form.Item name="code">
        <Input
          placeholder="请输入验证码"
          style={{ width: '60%' }}
          prefix={<MailOutlined />}
        />
        <Button
          htmlType="submit"
          disabled={codeDisabled}
          type="primary"
          ref={codeButton}
          onClick={getCode}
          style={{ width: '40%' }}
        >
          {codeText}
        </Button>
      </Form.Item>
      <Form.Item>
        <Button
          type="primary"
          style={{ borderRadius: '10px', width: '100%' }}
          htmlType="submit"
        >
          登录
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Phone;
